<template>
    <div class="tab-wrapper padding-global">
        <ul class="tab base-width">
            <li id="logo">
                <img class="logo"
                     src="https://wwsszz.top/static/file/2021-05-31/2021-05-31c9e4916bf0014276ac9e5925cc2b2523.svg"
                     alt="logo">
            </li>
            <router-link tag="li"
                         class="tab-item"
                         v-for="item in tabList"
                         :key="item.name"
                         :to="item.path"
            >
                <span class="tab-link">{{item.name}}</span>
            </router-link>
            <li class="tab-search">
                <span class="circle"></span>
                <el-select v-model="value" placeholder="请选择" @change="onchange">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <input type="text" v-model="searchVal" class="search-input" @keydown.enter="search" placeholder="Type here to search">
                <span class="iconfont">&#xe600;</span>
            </li>
            <li class="userInfo-wrapper" @click="onblog">
                <div class="userInfo">
                    <span class="name">{{userInfo.nickname}}</span>
                    <!--          <span class="other">1232435345@qq.com</span>-->
                </div>
                <img class="avatar" :src="userInfo.avatarUrl">
            </li>
        </ul>
    </div>
</template>

<script>
import { getUserInfo } from "../../common/js/cache";
import {messageMixin} from "../../common/js/mixin";

export default {
    mixins: [messageMixin],
    data () {
        return {
            tabList: [
                {
                    name: '首页',
                    path: '/Home'
                }, {
                    name: '社区',
                    path: '/community'
                }, {
                    name: '我的',
                    path: '/my'
                }, {
                    name: '资源',
                    path: '/website'
                }, {
                    name: '文件',
                    path: '/file'
                }
            ],
            options: [
                {
                  label: '搜索文章',
                },{
                    value: 'https://www.baidu.com/s?ie=UTF-8&wd=',
                    label: '百度'
                }, {
                    value: 'https://www.sogou.com/web?query=',
                    label: '搜狗'
                }, {
                    value: 'https://cn.bing.com/search?q=',
                    label: '必应'
                },
                {
                    value: 'https://so.csdn.net/so/search?q=',
                    label: 'CSDN'
                }, {
                    value: 'https://www.zhihu.com/search?type=content&q=',
                    label: '知乎'
                }, {
                    value: 'https://segmentfault.com/search?q=v',
                    label: '思否'
                }
            ],
            searchVal: '',
            value: '搜索文章',
            searchUrl: '',
            userInfo: []
        }
    },
    methods: {
        onchange (val) {
            this.searchUrl = val
        },
        search () {
            if (this.searchVal === '') {
                this._messge({
                    message: '搜索内容为空'
                })
                return
            }
            const url = this.searchUrl + this.searchVal
            window.open(url)
        },
        onblog () {
            this.$router.push('/myblog')
        }
    },
    created () {
        this.userInfo = getUserInfo()
        console.log(this.userInfo)
    }
}
</script>

<style scoped lang="scss">
    @import "../../common/scss/variable";

    .tab-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to bottom, rgb(44, 43, 43), rgba(44, 43, 43, .4));
        color: $color-nav-color;
        font-size: 14px;
        z-index: 999;

        .tab {
            display: flex;
            align-items: center;

            .logo {
                display: block;
                max-height: 36px;
                height: 36px;
                margin-left: 10px;
                margin-right: 60px;
                background-color: transparent;
            }

            .tab-item {
                position: relative;
                padding: 10px;
                cursor: pointer;
                font-size: 20px;
                transition: all 300ms;

                & + .tab-item {
                    margin-left: 31px;
                }
            }

            .tab-search {
                display: flex;
                align-items: center;
                width: 345px;
                height: 41px;
                padding: 0 14px;
                box-sizing: border-box;
                margin-left: auto;
                line-height: 20px;
                border-radius: 20px;
                background-color: rgba(51, 53, 54, 100);

                ::v-deep .el-select .el-input__inner {
                    background: transparent;
                    border-color: transparent;
                    color: #c2cfc2;
                }

                .circle {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    border: 2px solid #fff;
                    padding-right: 10px;
                    box-sizing: border-box;
                }

                .search-input {
                    width: 100%;
                    height: 20px;
                    padding: 0 10px;
                    box-sizing: border-box;
                    color: #fff;
                    border: 0;
                    outline: 0;
                    background-color: transparent;
                }

                .iconfont {
                    font-size: 12px;
                }
            }

            .userInfo-wrapper {
                display: flex;
                margin-left: 100px;

                .userInfo {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    justify-content: center;
                    font-size: 14px;
                    margin-right: 10px;
                }

                .avatar {
                    width: 64px;
                    height: 64px;
                    border-radius: 50%;
                }
            }
        }
    }
</style>
